<template>
  <view>
    <uni-popup ref="popDinPay" type="bottom" zindex>
      <view class="popup-content-remind">
        <view class="uni-dialogCon-remind">
          <view class="belivery-title">提示</view>
          <view class="flex justify-between con-w ul-con align-center">
            <text>我同意自动约餐扣款</text>
            <switch color="#53A87F" style="transform:scale(0.9)" :checked="switchFlag"  @change="changeSwitch"/>
          </view>
          <view class="conet-text con-w">
            绑定成功后，约餐从此卡按实际金额自动扣款，卡内余额可以在颐而康连锁门店，颐而康精选商城，炖大侠进行消费。
          </view>
          <view class="popupEmil-btn con-w flex justify-between align-center">
            <view class="flex justify-center align-center" @click="close">我再想想</view>
            <view class="flex justify-center align-center" @click="tapSure">我确认授权</view>
          </view>
        </view>
        <view class="bottomBtn">
          <view class="submitBtnBox flex align-center">
            <view class="none flex sublef_new flex-six">
              <view class="text-center subcont">清空重选</view>
            </view>
            <view class="subBtn flex-sub" @click.stop="close">确定</view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
	import { ref, computed,onMounted } from 'vue'
  const emit = defineEmits(["confirm"])
  const popDinPay = ref(null)
  const switchFlag = ref(false)
  const statue = ref(null)
  const open = () => {
  	popDinPay.value.open()
  }
  
  const close = () => {
  	popDinPay.value.close()
  }
  
  const tapSure = () => {
    emit("confirm", { statue: switchFlag.value })
    close()
  }
  
  const changeSwitch = (e) => {
    switchFlag.value = e.detail
    console.log(e.detail,'---------------------',switchFlag.value)
  }
  

  
  defineExpose({ open, close })
</script>

<style scoped lang="scss">
.con-w{
  width: 675rpx;
}
.ul-con{
  border-radius: 20rpx;
  background: #FFF;
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
  height: 126rpx;
  padding: 0 24rpx;
  margin: 0 auto;
}
.conet-text{
  color: #333;
  text-align: justify;
  font-size: 32rpx;
  font-weight: 400;
  margin: 30rpx auto 50rpx ;
  padding-left: 22rpx;
  padding-right: 22rpx;
}
.popup-content-remind{
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding-bottom: 40rpx;
  flex-shrink: 0;
  min-height: 602rpx;
  max-height: 96vh;
}
.belivery-title{
  color: #000;
  font-size: 36rpx;
  font-weight: 700;
  padding: 32rpx 0;
  text-align: center;
}
.popupEmil-btn{
  margin: 60rpx auto 0;
  view{
    width: 228.637rpx;
    height: 102rpx;
    border-radius: 20rpx;
    font-size: 32rpx;
    font-weight: 400;
    &:last-child{
      color: #Fff;
      background: #53A87F;
      width: 384rpx !important;
    }
    &:first-child{
      color: #5DB175;
      border: 1px solid #5DB175;
    }
  }
}
</style>